//tabs Menus
listTabsConfig = {
  $showAni: false
  $activeClass: '.active'
  $bg: #fff
  $br: $br
  $height: 40px
  $padding: false 
  $sizeM: false
  $itemPadding: 0 10px
  $itemMargin: false
  $color: #666
  $itemLine: 1px solid $color-line
  $disabledBg: $color-line
  $activeType: 'line'       //line单线条样式， card卡片化样式   lr左右结构带有footer或header

  $activeBg: false
  $activeColor: #000
  $activeFw: bold
  $position: 'bottom'
  // $itemMg: 40px
}
//tabs内容
boxTabConfig = {
  $boxBg: #fff
  $boxPadding: 20px 10px
  $scrollBoxes: false
}
//下线画
brLineAniConfig =  {
  $activeClass: '.active'
  $position: 'bottom'
  $lineHei: 2px
  $lineBot: 0
  $lineRight: false
  $lineColor: $color-hover
  $lineWid: 100%
  $disabledBg: $color-line
}
brLineAniLRConfig =  {
  $activeClass: '.active'
  $position: 'right'
  $lineHei: 100%
  $lineBot: false
  $lineRight: 0
  $lineColor: $color-hover
  $lineWid: 2px
  $disabledBg: $color-line
}



ss-border-ani($class = '.item', $config = false)
  cfg = merge({}, brLineAniConfig, $config)
  {$class}
    position: relative
    // overflow: hidden
    &:after
      content: ''
      position: absolute
      right: cfg.$lineRight if cfg.$lineRight != false
      bottom: cfg.$lineBot if cfg.$lineBot != false
      height: cfg.$lineHei if cfg.$lineHei
      border-radius: (cfg.$lineWid / 2) 
      border-radius: (cfg.$lineHei / 2) if (cfg.$position == 'top' || cfg.$position == 'bottom')
      width: cfg.$lineWid if cfg.$lineWid
      transform: translateY(@height)
      transform: translateX(@width) if (cfg.$position == 'top' || cfg.$position == 'bottom')
      transition: transform .5s
      z-index: 1
    &.disabled
      background: inherit
      color: cfg.$disabledBg
    if (cfg.$position == 'top' || cfg.$position == 'bottom')
      &{cfg.$activeClass}
        &:after
          if (cfg.$lineWid) 
            left: "calc(50% - %s)" % (cfg.$lineWid / 2)
          else
            left: 0
          top: inherit
          transform: translateX(0);
          background: cfg.$lineColor
        ~.item
          &:after
            top: inherit
            left: -(cfg.$lineWid)
            transform: translateX(@left)
    else 
      &{cfg.$activeClass}
        &:after
          left: inherit
          if (cfg.$lineHei) 
            top: "calc(50% - %s)" % (cfg.$lineHei / 2)
          else
            top: 0
          // transform: translateX(0);
          // transform: translateY(0);
          transform: translateY(0)
          background: cfg.$lineColor
        ~.item
          &:after
            left: inherit
            top: -(cfg.$lineHei)
            transform: translateY(@top)

ss-like-tabs($class = '.hlist', $config = {})
  cfg = merge({}, listTabsConfig, $config)
  {$class}
    color: cfg.$color
    font-size: cfg.$sizeM if cfg.$sizeM
    padding: cfg.$padding if cfg.$padding != false
    line-height: cfg.$height if cfg.$height
    &[class*=flex1]
      .item
        flex: 1
    .item:not(.t-item)
      padding: cfg.$itemPadding if cfg.$itemPadding != false
      margin: cfg.$itemMargin if cfg.$itemMargin != false
      background: cfg.$bg if cfg.$bg
      ss-display-flex(column, center, center)
      &{cfg.$activeClass}
        background: cfg.$activeBg if cfg.$activeBg
        color: cfg.$activeColor if cfg.$activeColor
        font-weight: cfg.$activeFw if cfg.$activeFw
      &.disabled
        background: cfg.$disabledBg
        cursor: no-drop
    if (cfg.$activeType == 'card')     //选项卡样式
      border: cfg.$itemLine if cfg.$itemLine
      border-radius: cfg.$br if cfg.$br
      margin-bottom: -1px;
      .item:not(.t-item)
        border-bottom: cfg.$itemLine
        border-left: cfg.$itemLine if cfg.$itemLine
        &:first-child
          border-left: none
        &{cfg.$activeClass}
          border-bottom-color: #fff
          border-left-color: $color-line
    else if (cfg.$activeType == 'card-tag')     //选项卡 标签 样式
      border-bottom: cfg.$itemLine if cfg.$itemLine
      line-height: @height
      margin-left: cfg.$itemMargin
      &:first-child
        margin-left: 0
      .item:not(.t-item)
        border: cfg.$itemLine if cfg.$itemLine
        border-radius: cfg.$br if cfg.$br
        margin-bottom: -1px;
        &{cfg.$activeClass}
          border-bottom-color: #fff
    else 
      border-bottom: cfg.$itemLine if cfg.$itemLine
      ss-border-ani('.item:not(.t-item)',{position: cfg.$position})

          

      
      

// // $menusScroll treeFooter 或 treeHeader存在时
containerConfig = {
  $menusScroll:false
  $width: 100%
  $height:false
}

ss-tabs($class = '.tabsGroup', $containerConfig = false,  $menusConfig = false, $boxConfig = false)
  cfg = merge({}, containerConfig, $containerConfig)
  cfgMenus = merge({}, listTabsConfig, $menusConfig)
  cfgBox = merge({}, boxTabConfig, $boxConfig)
  {$class}
    width: cfg.$width if cfg.$width
    height: cfg.$height if cfg.$height
    ss-display-flex(column)
    &.box-disN
      >.tabsBoxes
        >.item
          display: none
          &.active
            display: block
    ss-like-tabs('>.tabsMenus', cfgMenus)
    >.tabsMenus
      ss-display-flex()
      [class='list-body']
        ss-display-flex()
    >.tabsBoxes
      background: cfgBox.$boxBg
      box-sizing: border-box
      padding: cfgBox.$boxPadding if cfgBox.$boxPadding
      if (cfgBox.$boxWidth)
        width: cfgBox.$boxWidth 
        margin: auto
      if (cfgMenus.$activeType == 'card')
        border: cfgMenus.$itemLine
        border-top: none
        border-radius: 0 0 cfgMenus.$br cfgMenus.$br

    [class*='scroll']
      ss-func-customscroll('&', {$height: 100%, $min-height: 300px})
    //以下这个地方，可移到外面？！ 是否
    &[class*='row']
      flex-flow: row nowrap
      >.tabsMenus
        flex-flow: column
        border-bottom: none
        border-right: cfgMenus.$itemLine if cfgMenus.$itemLine
        ss-border-ani($config: brLineAniLRConfig)
        .item:not(.t-item)
          margin: 0 0 10px 0
          padding: cfgMenus.$itemMargin
        [class='list-body']
          flex-flow: column
      >.tabsBoxes
        padding: 10px 20px
        flex: 1
        
      
ss-tabs-btnx()
  .list-wrap
    flex: 1
    overflow: hidden
  .tabs-btn-cut
    ss-display-flex(row nowrap, flex-start, center)
    border: 1px solid $color-line
    margin-left: 6px
    if ($height)
      height: 34px
    else 
      flex-grow: 1
    .ss-item 
      border-left: @border
      box-sizing: border-box
      color: $color
      width: 32px
      text-align: center
      &:first-child
        border-left: none
      &.disabled
        color: $color-line-secondary
        cursor: not-allowed


